<template>
    <el-container>
        <div style="padding:0 15px;display:flex;">
            <sc-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></sc-select-filter>
            <scFilterBar filterName="filterName" :options="options" @filterChange="changeBar" style="margin-top:15px;margin-right:150px">
				<template #default="{filterLength, openFilter}">
					<el-badge :value="filterLength" type="danger" :hidden="filterLength<=0">
						<el-button icon="el-icon-filter" @click="openFilter">高级查询</el-button>
					</el-badge>
				</template>
			</scFilterBar>
        </div>
        <el-header style="height:1px"></el-header>
        <!-- <el-header>
            <div class="right-panel-search">
                <div class="search-input">巡检任务单号</div>
                <el-input v-model="search.keywords" placeholder="请输入巡检任务单号" clearable></el-input>
                <div class="search-input">设备名称</div>
                <el-input v-model="search.device_keywords" placeholder="请输入设备名称" clearable></el-input>
                <div class="search-input">巡检人员</div>
                <el-input v-model="search.other" placeholder="请输入巡检人员" clearable></el-input>
                <el-date-picker v-model="time" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-header>
            <sc-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></sc-select-filter>
        </el-header> -->
        <el-main class="nopadding">
            <scTable ref="table" tableName="xunTaskColumn" :apiObj="apiObj" :column="column" row-key="id" stripe remoteSort remoteFilter border>
                <el-table-column fixed type="selection" width="50"></el-table-column>
                <el-table-column fixed type="index" label="序号" align="center" width="50"></el-table-column>
                <!-- 故障描述 -->
<!--                <template #remark="scope">-->
<!--                    <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.row.remark">-->
<!--                    <template #reference>-->
<!--                        <el-button style="padding: 5px 0;" text class="m-2" v-if="scope.row.remark">{{scope.row.remark && scope.row.remark.substring(0, 15)}}</el-button>-->
<!--                    </template>-->
<!--                    </el-popover>-->
<!--                </template>-->
                <!-- 方案名称 -->
                <template #project_title="scope">
                    <div>{{scope.row.project_title}}-{{scope.row.project_code}}</div>
                </template>
                <!-- 巡检状态 -->
                <template #type="scope">
                    <el-tag v-if="scope.row.type==1" type="success">已巡检</el-tag>
                    <el-tag v-if="scope.row.type==0" type="danger">待巡检</el-tag>
                </template>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="main(scope.row, scope.$index)" v-if="scope.row.type==0" v-auth="'xunPlan.main'">巡检</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
			</scTable>
        </el-main>
    </el-container>
    <add-recird v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></add-recird>
</template>

<script>
import addRecird from '../record/addRecird.vue';
export default {
  components: { addRecird },
	name: "user",
	data() {
		return {
			dialog: {
				save: false,
			},
			apiObj: this.$API.device.InspectionProjectTask.lists,
			selection: [],
			search:{
                keywords:null,
                device_keywords:null,
                other:null,
                start_time:null,
                end_time:null,
            },
            time:"",
            data: [
                {
                    title: "巡检状态",
                    key: "type",
                    options: [
                        {label: "全部",value: ""},
                        {label: "待巡检",value: "0"},
                        {label: "已巡检",value: "1",},
                    ]
                },
            ],
            column: [
                {label: "巡检任务单号",prop: "code",width: "150",},
                {label: "设备代码",prop: "device_code",width: "150",},
                {label: "设备名称",prop: "device_title",width: "150",},
                {label: "设备类别",prop: "class_title",width: "150",},
                {label: "方案名称",prop: "project_title",width: "150",},
                {label: "巡检人员",prop: "admin_names",width: "150",},
                {label: "巡检部门",prop: "dep_name",width: "150",},
                {label: "巡检项目",prop: "maintain_title",width: "150",},
                {label: "巡检类型",prop: "check_class_title",width: "150",},
                {label: "计划名称",prop: "plan_title",width: "150",},
                {label: "计划开始时间",prop: "start_time",width: "150",sortable: true},
                {label: "计划结束时间",prop: "end_time",width: "150",sortable: true},
                {label: "创建时间",prop: "create_time",width: "150",},
                {label: "巡检状态",prop: "type",width: "150",},
                {label: "备注",prop: "remark",width: "150",},
            ],
            options: [
                {label: '模糊查询',value: 'keywords',type: 'text',selected: true,placeholder: '请输入关键词',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]},
                {label: '设备名称',value: 'title_keywords',type: 'text',selected: true,placeholder: '请输入设备名称',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]},
                {label: '计划时间',value: 'create_time',type: 'daterange',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]
					},
            ]
		};
	},
	watch: {},
	mounted() {
    },
	methods: {
        change(selected){
            this.search.type = selected.type,
            this.upsearch()
        },
		//添加
		add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add");
			});
		},
        // 巡检
        main(row){
            this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
        },
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		// 搜索
        upsearch() {
            if(this.time!=null){
                this.search.start_time = this.time[0]
                this.search.end_time = this.time[1]
            }else{
                this.search.start_time = ""
                this.search.end_time = ""
            }
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
        changeBar(data){
            this.search.child = data
            this.upsearch()
        },
	},
};
</script>

<style></style>
